#{extends 'main.html' /}
#{set title:'find.html' /}

<script type="text/javascript">

/*
	Calls the method getLocation when document is loaded
*/
$(document).ready(function() {
    getLocation();
});


/*
	Gets the current position and forwards it to showPosition
*/
function getLocation() {
	if (navigator.geolocation) {
    	navigator.geolocation.getCurrentPosition(showPosition);
    }
	else{
		$('#searchGeo').html("Geolocation is not supported by this browser.");
	}
}

/*
	Stores the current position in the hidden input attributes
*/
function showPosition(position) {
	$('#latitude').val(position.coords.latitude);
	$('#longitude').val(position.coords.longitude);
	
}



</script>


<div id="searchDivTopFind">
	#{form @Views.searchResults()}<input type="hidden" id="latitude" name="latitude" /> <input type="hidden" id="longitude" name="longitude" /><input type="text" id="keywords" class="searchDivTopInput" value="${keywords}" name="keywords" /> <input type="submit" value="search" /> <small><label for="nearby" style="display: inline-block;"><input type="checkbox" name="nearby" id="nearby" value="true" #{if nearby}checked="checked"#{/if} />Search&nbsp;for&nbsp;objects&nbsp;nearby</label></small>  #{/form}	
	#{form @Views.setSearch()}(#{if interests}${interests.size()}#{/if}#{else}0#{/else}) objects of Interest. <a href="@{Views.searchResults()}"><div id="button">Back to search results</div></a>
	<small><label for="searchSimilar" style="display: inline-block;"><input type="radio" class="searchRadio" name="search" value="1" #{if searchType == 1}checked="checked" #{/if} id="searchSimilar" />Similarity&nbsp;search</label>
	<label for="searchExact" style="display: inline-block;"><input type="radio" class="searchRadio" name="search" value="2" #{if searchType == 2}checked="checked" #{/if} id="searchExact" />Exact&nbsp;search</label></small>
			#{/form}






</div>




<div id="interestList">
<div id="leftSidebar">
	#{ifnot interests}
		No interests
	#{/ifnot}
	#{else}
		#{list items:interests, as:'interest'}
			<div id="${interest.id}" class="interest">
				<div class="interestSuper" style="background-image: url('${interest.getAttribute("thumb")}'); background-size: cover; background-position: center">
				<div style="background-color: grey; position: relative; color: red; font-weight: bold; top: 0px; right: 0px; width: 40px; margin-left: auto; visibility: hidden" class="deleteButton">X</div>
				</div><div class="interestChild"  >${interest}</div>
			</div>
		#{/list}
	#{/else}
</div>

</div>
#{ifnot interests}
	#{/ifnot}
	#{else}
	<div id="attributesSuper">
		#{list items:interests, as:'interest'}
			<div style="background-color: #cccccc; max-height: 0px; visibility:hidden;" id="${interest.id}attributes" class="attributes">
			#{form @Views.setAttributes(interest.id), class:'attributeForm'}
				#{list items:interest.getCategoryAttributes(), as:'attribute'}
					
					<div class="attributeDiv"><input  type="checkbox"
					class="attributeCheckbox" name="attributes[]" value="${attribute.id}"
					#{if storedAttributes.contains(attribute.getId())}checked="checked" #{/if} id="${attribute.id}"
				/><label for="${attribute.id}">${attribute}</label></div>
					
				#{/list}
			#{/form}
			</div>
	#{/list}
	</div>
#{/else}

<div id="findResultsDiv">
<div style="text-align: center; font-weight: bold">
<br /><br /><br /><br /><br /><br /><br />
<img src="@{'public/images/loading.gif'}" /><br /><br />loading</div>
</div>

<script type="text/javascript">

	/*
		This call is clicked when any object of interst is clicked.
		It hides all attributes list and then displays the attributes list for the clicked cathedral.
		If the cathedrals interest list was already shown, it is hidden.
		
		Also it displays the red X to delete an interst.
	*/
	$('.interest').click(function (event) {
		
		if($('#' + this.id + 'attributes').css('visibility') == 'visible') {
			$('.attributes').css('visibility', 'hidden');
			$('.attributes').css('max-height', '0px');
			$('.deleteButton').css('visibility', 'hidden');
			$('.deleteButton').unbind("click");
			
		}
		else {
			$('.attributes').css('visibility', 'hidden');
			$('.attributes').css('max-height', '0px');
			
			$('.deleteButton').css('visibility', 'hidden');
			$('.deleteButton').unbind("click");
			
			$('#' + this.id + 'attributes').css('max-height', 'none');
			$('#' + this.id + 'attributes').css('visibility', 'visible');
			
			$(this).find('.deleteButton').css('visibility', 'visible');
			var interestId = this.id;
			$(this).find('.deleteButton').on('click', function () {
        		if(confirm('Are you sure you want to delete this cathedral?'))
        			window.location.href = "@{Views.removeObject()}?id=" + interestId ;
    		});
			
			
		}
		
		
		
    	
	});
	
	
	/*
		All this code is loaded when the document is completely loaded.
	*/
	$(document).ready(function(){
	
	
			//This code is loaded when any attribute is clicked.
		   $checkboxesInput = $('.attributeCheckbox');
		   $checkboxesInput.click(function(event){
		       
			   // The attribute list is send to the controller using AJAX
		      $.post($(this).closest("form").attr('action'), $(this).closest("form").serialize(), function(response){
		            // do something here on success
		      },'json');
		      
			   
			   // The list of results is removed and replaced with a button to reload results
		      $("#findResultsDiv").html('<div style="text-align: center; font-weight: bold"><br /><br /><br /><br /><br /><br /><br /><a id="reloadFindResults" class="button">Changes have been made, click here to reload</a></div>');
		      
		
		      // The reload button is giving the functionality to dynamically load the content of findResultsJS()
		      $("#reloadFindResults").click(function(event){
		   	   $("#findResultsDiv").html('<div style="text-align: center; font-weight: bold"><br /><br /><br /><br /><br /><br /><br /><img src="@{'public/images/loading.gif'}" /><br /><br />loading</div><br /><br />');
		   		$("#findResultsDiv").load("@{Views.findResultsJS()}");   
		      
		      });
		      
			});
		   
		   
		 //This code is loaded whenever the type of search is changed (similarity - exact) 
		   $searchRadio = $('.searchRadio');
		   $searchRadio.click(function(event){
		       
			   // The chosen search is sent to the controller
		      $.post($(this).closest("form").attr('action'), $(this).closest("form").serialize(), function(response){
		            // do something here on success
		      },'json');
		      
		   		// The list of results is removed and replaced with a button to reload results
		      $("#findResultsDiv").html('<div style="text-align: center; font-weight: bold"><br /><br /><br /><br /><br /><br /><br /><a id="reloadFindResults" class="button">Changes have been made, click here to reload</a></div><br /><br />');
		
		      // The reload button is giving the functionality to dynamically load the content of findResultsJS()
		      $("#reloadFindResults").click(function(event){
		      	   $("#findResultsDiv").html('<div style="text-align: center; font-weight: bold"><br /><br /><br /><br /><br /><br /><br /><img src="@{'public/images/loading.gif'}" /><br /><br />loading</div>');
		      		$("#findResultsDiv").load("@{Views.findResultsJS()}");   
		         
		         });
		      
		      });
      

   
   
   
   
   });
	
	
	/*
		This code is loaded when the document is completely loaded.
	*/
	$(document).ready(function(){
	      // sends a request to findResultsJS to load initial find Results 
	      $("#findResultsDiv").load("@{Views.findResultsJS()}");
    
	});
	
	
	
	/*
		This code hides an open attribute list whenever a mouse click is done outside of that list
		It catches all mouseclicks and checks their location.
		If their location is outside of attribute list, the list is hidden.
	*/
	$(document).mouseup(function (e) {
    	var container = $('.interest');
    	
    	var container2 = $('.attributes');

    	
    	if(container2.has(e.target).length === 0 && container.has(e.target).length === 0) {
    		$('.attributes').css('visibility', 'hidden');
			$('.attributes').css('max-height', '0px');
			$('.deleteButton').css('visibility', 'hidden');
			$('.deleteButton').unbind("click");
    	}
	});
</script>


